<script setup lang="ts">
import { ref } from "vue";
</script>

<template>
  <div class="page1">
    <div class="head">
      <div class="head_img"></div>
      <div>
        <p>上传您的笔迹</p>
        <p>测测您的暖男指数</p>
      </div>
    </div>
    <div class="body_page1">
      <div class="body_title">暖男度娘定义</div>
      <p>顾家 买汰烧样样精通</p>
      <p>细致 温柔 体贴 耐心</p>
      <p>干净清秀 打扮得体</p>
      <p>不会显得过于浮躁和浮夸</p>
    </div>
    <div class="foot">
      <p>向左滑动，上传一份笔迹样本：</p>
      <p>a. 5行以上手写文字</p>
      <p>b.使用黑色中性笔或普通水笔书写</p>
      <p>c. A4纸抄写任意文字</p>
    </div>
  </div>
</template>

<style scoped>

@font-face {
    font-family: 'STXINWEI';
    src: url('../assets/fonts/STXINWEI.TTF');
    font-weight: normal;
    font-style: normal;
}
.page1 {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: rgb(242, 242, 242);
}
.head {
  height: 200px;
  display: flex;
  justify-items: center;
  align-items: center;
  text-align: center;
}
.head_img {
  height: 100%;
  width: 150px;
  background-image: url("../assets/imgs/image3.png");
  background-size: 100% 100%;
}
.head p {
  font-size: 1.5rem;
  font-family: STXINWEI;
  font-weight: 800;
  color: rgb(0, 112, 192);
}
.body_page1 {
  color: rgb(103, 57, 57);
  text-align: center;
}
.body_title {
  font-weight: 700;
  font-size: 2.5rem;
  font-family: STXINWEI;
}
.body_page1 p {
  font-size: 1.5rem;
  margin: 0.8rem;
  font-family: STXINWEI;
}
.foot {
  color: #363636;
  font-size: 0.8rem;
  font-weight: 600;
  
}
.foot p{
  margin: 3px;
}
</style>
